/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import 'highlight.js/styles/atom-one-light.css';
import jsx_transfer from '@/assets/images/advanceReact/jsx_transfer.png';
import event_refactor from '@/assets/images/advanceReact/event_refactor.png';
import event_bug from '@/assets/images/advanceReact/event_bug.png';
import event_bug_resolution from '@/assets/images/advanceReact/event_bug_resolution.png';

import './index.less';

const { Panel } = Collapse;
const REACT_ELEMENT_TYPE = Symbol(React.element);
const RESERVED_PROPS = {};
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function React17() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3', '4']}>
        <Panel header="1、定义" key="1">
          React
          v17的发布非比寻常，因为它没有增加任何面向开发者的新特性。但是，这个版本会使得React自身的升级变得更加容易。
          值得特别说明的是，React v17作为后续版本的“基石”，它让不同版本的React相互嵌套变得更加容易。
        </Panel>
        <Panel header="2、新的JSX转换逻辑" key="2">
          自动引入React，不必主动<code>import React from &apos;react&apos;</code>
          <img src={jsx_transfer} width="20%" alt="" />
          <p>
            react/jsx-runtime中的JSX解析器在内部实现了React.createElement无法做到的性能优化和简化，
            在一定情况下，它可能会略微改善编译输出内容的大小。
          </p>
        </Panel>
        <Panel header="3、事件系统重构" key="3">
          <img src={event_refactor} width="50%" alt="" />
          <br></br>
          <img src={event_bug} width="30%" alt="" />
          <img src={event_bug_resolution} width="30%" alt="" />
          <br></br>
          <p>
            合成事件对象会被放进一个叫作“事件池”的地方统一管理，每当事件处理函数执行完毕后，其对应的合成事件对象内
            部的所有属性都会被置空，意在为下一次被复用做准备。
          </p>
        </Panel>
        <Panel header="4、Lane 模型的引入" key="3">
          v16:xpirationTime模型使用expirationTime (一个时间长度)来描述任务的优先级，
          v17:Lane模型则使用二进制数来表示任务的优先级，lane模型通过将不同优先级赋值给一个位
          通过31位的位运算来操作优先级
        </Panel>
      </Collapse>
    </div>
  );
}
